<template>
  <section class="main">
    <el-card>
      <!-- 包子展示&&其他展示 -->
      <div id="anchor02" class="baozi_other_show">
        <div class="select">
          <div class="baozi"><span @click="baozi_display">包子</span></div>
          <div class="other"><span @click="other_display">其他</span></div>
        </div>

        <!-- 展示包子 -->
        <div v-show="baozi_show" class="display">
          <el-table
          max-height="500"
          :data="baozi_display_array_to_show"
          style="width: 100%">
            <el-table-column
              label="标题"
              width="350">
              <template slot-scope="scope">
                <span v-html="scope.row.product_name"></span>
              </template>
            </el-table-column>
            <el-table-column
              label="内容"
              width="350">
              <template slot-scope="scope">
                <span v-html="scope.row.product_title"></span>
              </template>
            </el-table-column>
            <el-table-column
              label="图片"
              width="350">
              <template slot-scope="scope">
                <el-image :src="scope.row.product_image" width="10" height="10" class="head_pic"></el-image>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <!-- <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">编辑</el-button> -->
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- <div class="baozi_show">
            <el-card
              shadow="never"
              v-for="(item, index) in baozi_display_array_to_show"
              :key="index"
              :body-style="{ padding: '0px' }"
              class="el_card-item"
            >
              <i
                @click="delete_baozi_card_item(index)"
                class="iconfont icon-chahao"
              ></i>
              <img :src="item.product_image" />
              <div class="el_card_item_content">
                <el-input v-model="item.product_name"></el-input>
                <el-input v-model="item.product_title"></el-input>
              </div>
            </el-card>
          </div> -->
        </div>

        <!-- 展示其他 -->
        <div v-show="other_show" class="display">
          <el-table
          max-height="500"
          :data="other_display_array_to_show"
          style="width: 100%">
            <el-table-column
              label="标题"
              width="350">
              <template slot-scope="scope">
                <span v-html="scope.row.product_name"></span>
              </template>
            </el-table-column>
            <el-table-column
              label="内容"
              width="350">
              <template slot-scope="scope">
                <span v-html="scope.row.product_title"></span>
              </template>
            </el-table-column>
            <el-table-column
              label="图片"
              width="350">
              <template slot-scope="scope">
                <el-image :src="scope.row.product_image" width="10" height="10" class="head_pic"></el-image>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <!-- <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">编辑</el-button> -->
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-card>
  </section>
</template>

<script>
import { product, deleteData } from "../../utils/api";
export default {
  data() {
    return {
      baozi_show: true,
      other_show: false,
      visible: false,
      params: {
        type: ""
      },
      other_params: {
        type: "2"
      },
      baozi_display_array_to_show: [],
      other_display_array_to_show: [],
      deleteParams: {
        type: "product",
        id: ""
      }
    };
  },
  methods: {
    // 删除指定ID数据
    handleDelete(index, row) {
      this.deleteParams.id = row.product_id;
      this.$confirm("确认删除？").then(() => {
        deleteData(this.deleteParams).then(
          this.$message("删除成功"),
          this.getProducts(),
          this.getOtherProducts()
        );
      });
    },
    // 获取包子列表
    getProducts() {
      product(this.params).then(res => {
        this.baozi_display_array_to_show = res.data.results;
        // this.page.total = res.data.results.length;
      });
    },
    // 获取其他列表
    getOtherProducts() {
      product(this.other_params).then(res => {
        this.other_display_array_to_show = res.data.results;
        // this.page.total = res.data.results.length;
      });
    },
    delete_baozi_card_item(index) {
      this.baozi_display_array_to_show.splice(index, 1);
    },
    delete_other_card_item(index) {
      this.other_display_array_to_show.splice(index, 1);
    },
    baozi_display() {
      this.baozi_show = true;
      this.other_show = false;
    },
    // 包子show 其他hidden
    other_display() {
      this.getOtherProducts();
      this.baozi_show = false;
      this.other_show = true;
    }
  },
  created() {
    this.getProducts();
  }
};
</script>

<style lang="less" scoped>
.main {
  // .crumbs {
  // }
  .baozi_other_show {
    // background: #f1f1f1;
    padding: 30px 0 60px 0;

    .select {
      display: flex;
      margin: auto;
      width: fit-content;

      div {
        width: 72px;
        height: 67px;
        box-sizing: border-box;
        font-size: 36px;
        font-weight: bold;
        color: #595757;
        cursor: pointer;
        margin-right: 50px;

        &:last-child {
          margin-right: 0;
        }

        &:hover {
          color: #db392b;
          border-bottom: 4px solid #db392b;
        }
      }
    }

    .display {
      .baozi_show {
        // margin: 0;
        margin: auto;
        width: 100%;
        height: fit-content;
        display: flex;
        flex-wrap: wrap;
        .el_card-item {
          position: relative;
          width: 20%;
          height: 309px;
          // margin-right: 21px;
          margin-top: 31px;

          i:first-child {
            cursor: pointer;
            position: absolute;
            // width: 40px;
            // height: 40px;
            border-radius: 50%;
            // background: red;
            top: 0px;
            left: 0px;
            // transform: translate(-50%, -50%);
            font-size: 50px;
            z-index: 2;
          }

          &:nth-child(4n) {
            margin-right: 0;
          }

          img {
            width: 100%;
            height: 176px;
            border-style: none;
            border: 0;
          }

          .el_card_item_content {
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            padding: 38px 42px 45px 32px;

            p {
              margin: 0;

              &:first-child {
                font-size: 20px;
                font-weight: 600;
                margin-bottom: 14px;
              }
              &:last-child {
                font-size: 16px;
                font-weight: 400;
                line-height: 28px;
              }
            }
          }
        }
      }
      .add_area {
        width: 20%;
        height: 342px;
        background: #f1f1f1;
        box-sizing: border-box;
        border: 1px dashed #e1e1e1;

        .plus_icon {
          position: relative;
          cursor: pointer;
          width: 100%;
          height: 100%;
          background: transparent;
          i {
            position: absolute;
            width: 1%;
            height: 30%;
            background: #919191;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            &:last-child {
              transform: translate(-50%, -50%) rotate(90deg);
            }
          }
        }
      }
    }
  }
}
</style>
